@import 'general';
.Q-Rollover.effect-08{
	// Initial
		.mask{
   		background-color: rgba(255, 255, 255, 0.7);
   		top: -200px;
			.transition(all 300ms ease-out 500ms);
		}
		p{color:@gray;}
		h4, p, a.trigger{
			.translateY(-200px);
			.transition(all 200ms ease-in-out 100ms);
		}
	// animacion
		&:hover .mask,
		&:hover h4,
		&:hover p,
		&:hover a.trigger{
			.opacity(1);
		}
		&:hover .mask{
   		top: 0px;
			.transition-delay(0ms);
			.animation(bounceY 900ms linear);
		}
		&:hover h4{
			.translateY(0px);
			.transition-delay(400ms);
		}
		&:hover p{
			.translateY(0px);
			.transition-delay(200ms);
		}
		&:hover a.trigger{
			.translateY(0px);
			.transition-delay(0ms);
		}
}
@keyframes bounceY {
    0%{transform: translateY(-205px);}
    40%{transform: translateY(-100px);}
    65%{transform: translateY(-52px);}
    82%{transform: translateY(-25px);}
    92%{transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100%{transform: translateY(0px);}
}
@-moz-keyframes bounceY {
    0%{-moz-transform: translateY(-205px);}
    40%{-moz-transform: translateY(-100px);}
    65%{-moz-transform: translateY(-52px);}
    82%{-moz-transform: translateY(-25px);}
    92%{-moz-transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100%{-moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
    0%{-webkit-transform: translateY(-205px);}
    40%{-webkit-transform: translateY(-100px);}
    65%{-webkit-transform: translateY(-52px);}
    82%{-webkit-transform: translateY(-25px);}
    92%{-webkit-transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100%{-webkit-transform: translateY(0px);}
}